<template>
  <div class="dashboard-right">
    <dv-border-box-8 :reverse="true" class="border-box"> 
      <div class="title">年龄结构</div>
      <div id="age-structure-chart" style="width: 100%; height: 80%;"></div>
    </dv-border-box-8>
    <dv-border-box-8 :reverse="true" class="border-box">
      <div class="title">性别比例</div>
      <div id="gender-structure-chart" style="width: 100%; height: 80%;"></div>
    </dv-border-box-8>
    <dv-border-box-8 :reverse="true" class="border-box">
      <div class="title">商铺比例</div>
      <div id="shop-structure-chart" style="width: 100%; height: 80%;"></div>
    </dv-border-box-8>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';

onMounted(() => {
  // 年龄结构图
  const ageChartDom = document.getElementById('age-structure-chart');
  const ageChart = echarts.init(ageChartDom);
  const ageOption = {
    title: {
      top: '10%',
      textStyle: {
        color: 'white',
        fontSize: 30
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    series: [
      {
        name: '年龄结构',
        type: 'pie',
        radius: [20, 100],
        center: ['50%', '50%'],
        roseType: 'radius',
        itemStyle: {
          borderRadius: 8
        },
        label: {
          show: true,
          formatter: '{b}: {c} ({d}%)',
          color: 'white',
          fontSize: 16
        },
        data: [
          { value: 11.04, name: '0-14岁' },
          { value: 67.84, name: '15-59岁' },
          { value: 21.12, name: '60岁以上' },
          { value: 15.98, name: '65岁以上' }
        ]
      }
    ]
  };
  ageChart.setOption(ageOption);

  // 性别比例图
  const genderChartDom = document.getElementById('gender-structure-chart');
  const genderChart = echarts.init(genderChartDom);
  const genderOption = {
    title: {
      top: '10%',
      textStyle: {
        color: 'white',
        fontSize: 30
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['男性', '女性'],
      textStyle: {
        color: 'white'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      axisLabel: {
        color: 'white'
      }
    },
    yAxis: {
      type: 'category',
      data: ['常熟市'],
      axisLabel: {
        color: 'white'
      }
    },
    series: [
      {
        name: '男性',
        type: 'bar',
        stack: '总量',
        label: {
          show: true,
          position: 'insideRight',
          formatter: '{c}%',
          color: 'white',
          fontSize: 16
        },
        data: [52.01]
      },
      {
        name: '女性',
        type: 'bar',
        stack: '总量',
        label: {
          show: true,
          position: 'insideRight',
          formatter: '{c}%',
          color: 'white',
          fontSize: 16
        },
        data: [47.99]
      }
    ]
  };
  genderChart.setOption(genderOption);

  // 商铺数量图
  const shopChartDom = document.getElementById('shop-structure-chart');
  const shopChart = echarts.init(shopChartDom);
  const shopOption = {
    title: {
      top: '10%',
      textStyle: {
        color: 'white',
        fontSize: 30
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    series: [
      {
        name: '商铺比例',
        type: 'pie',
        radius: '50%',
        center: ['50%', '50%'],
        label: {
          show: true,
          formatter: '{b}: {c} ({d}%)',
          color: 'white',
          fontSize: 16
        },
        data: [
          { name: '奶茶店', value: 10 },
          { name: '咖啡店', value: 8 },
          { name: '炸鸡店', value: 5 },
          { name: '快餐店', value: 6 },
          { name: '超市', value: 4 },
          { name: '蛋糕店', value: 3 },
          { name: '宠物店', value: 1 },
          { name: '4s店', value: 2 }
        ]
      }
    ]
  };
  shopChart.setOption(shopOption);
});
</script>

<style scoped>
.dashboard-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  margin-left: 8px;
}
.border-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  color: white;
}
.title {
  font-size: 20px;
  color: white;
  margin-top: 10px;
  text-align: center;
  margin-bottom: 10px;
}
</style>

